<template>
  <div class="about-me-container">
    <!-- 头部区域：带有动态背景和打字效果的标题 -->
    <section class="header-section">
      <div class="dynamic-background"></div>
      <div class="title-container">
        <h1 class="main-title" ref="titleElement"></h1>
      </div>
    </section>
    
    <!-- 个人信息卡片区域 -->
    <section class="info-section">
      <div class="info-card" v-for="(section, index) in sections" :key="index" 
           v-intersect="{ handler: onIntersect, options: { threshold: 0.3 } }">
        <h2 class="section-title">{{ section.title }}</h2>
        <div class="section-content" v-html="section.content"></div>
      </div>
    </section>
    
    <!-- 技能展示区域 -->
    <section class="skills-section">
      <h2 class="section-title">我的技能</h2>
      <div class="skills-container">
        <div class="skill-item" 
             v-for="(skill, index) in skills" 
             :key="index"
             :style="{ animationDelay: index * 0.1 + 's' }"
             v-intersect="{ handler: onSkillIntersect, options: { threshold: 0.1 } }">
          <div class="skill-icon">
            <i :class="skill.icon"></i>
          </div>
          <div class="skill-info">
            <h3>{{ skill.name }}</h3>
            <div class="skill-bar">
              <div class="skill-progress" :style="{ width: '0%' }" :data-width="skill.level + '%'" ref="skillBars"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 项目经历区域：带有滚动动画效果 -->
    <section class="projects-section">
      <h2 class="section-title">项目经历</h2>
      <div class="projects-timeline">
        <div class="project-item" 
             v-for="(project, index) in projects" 
             :key="index"
             :class="{ 'from-left': index % 2 === 0, 'from-right': index % 2 !== 0 }"
             v-intersect="{ handler: onProjectIntersect, options: { threshold: 0.1 } }">
          <div class="project-date">{{ project.date }}</div>
          <div class="project-content">
            <h3>{{ project.title }}</h3>
            <p>{{ project.description }}</p>
            <div class="project-tech-stack">
              <span v-for="(tech, techIndex) in project.technologies" :key="techIndex">
                {{ tech }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 生活感悟区域：带有悬停效果的卡片 -->
    <section class="life-insights-section">
      <h2 class="section-title">生活小文案</h2>
      <div class="insights-container">
        <div class="insight-card" 
             v-for="(insight, index) in lifeInsights" 
             :key="index"
             :style="{ animationDelay: index * 0.15 + 's' }"
             v-intersect="{ handler: onInsightIntersect, options: { threshold: 0.1 } }">
          <div class="insight-icon">
            <i :class="insight.icon"></i>
          </div>
          <h3>{{ insight.title }}</h3>
          <p>{{ insight.content }}</p>
        </div>
      </div>
    </section>
    
    <!-- 自定义粒子效果背景 -->
    <div id="particles-bg" class="particles-container" ref="particlesContainer"></div>
  </div>
</template>

<script>
import { ref, onMounted, reactive } from 'vue';
import Typed from 'typed.js';

export default {
  name: 'AboutMe',
  
  directives: {
    // 自定义指令：检测元素进入视口
    intersect: {
      mounted(el, binding) {
        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              binding.value.handler(el);
            }
          });
        }, binding.value.options);
        
        observer.observe(el);
      }
    }
  },
  
  setup() {
    const titleElement = ref(null);
    const particlesContainer = ref(null);
    const skillBars = ref([]);
    
    // 个人经历和项目部分数据
    // 在这里修改文本内容
    const sections = reactive([
      {
        title: "关于我",
        content: `
          <p>我是一名充满热情的全栈开发者，专注于构建用户友好的网站和应用程序。
          我喜欢学习新技术，解决复杂问题，并创造有影响力的数字体验。</p>
          <p>在过去的几年里，我参与开发了多个项目，从企业级应用到个人创意项目。
          我相信技术应该为人服务，而不是相反。</p>
        `
      },
      {
        title: "个人发展",
        content: `
          <p>一直在上学啊/(ㄒoㄒ)/~~</p>
          <p>25年6月左右就要去找工作了，现在就业情景哭了</p>
        `
      }
    ]);
    
    // 技能数据
    // 在这里修改您的技能和熟练程度
    const skills = reactive([
      { name: "Vue.js", level: 95, icon: "fab fa-vuejs" },
      { name: "JavaScript", level: 90, icon: "fab fa-js" },
      { name: "Java", level: 85, icon: "fab fa-java" },
      { name: "CSS/SASS", level: 82, icon: "fab fa-css3-alt" },
      { name: "Node.js", level: 78, icon: "fab fa-node-js" },
      { name: "React", level: 70, icon: "fab fa-react" }
    ]);
    
    // 项目经历数据
    // 在这里修改您的项目经历
    const projects = reactive([
      {
        title: "个人博客",
        date: "2025",
        description: "基于Vue3和SpringBoot等等乱七八糟的开发了目前的这个博客，感叹一下还是若依做管理系统省事",
        technologies: ["Vue3", "Element Plus", "Spring Boot", "MyBatis"]
      },
      {
        title: "gal游戏开发",
        date: "2023",
        description: "因该是2023年吧，在网上拉点人组个队，做了个gal游戏，虽然没做完，但是还是很有意思的，策划案是写着真累",
        technologies: ["Renpy","python"]
      },
    ]);
    
    // 生活感悟数据
    // 在这里修改您的生活感悟
    const lifeInsights = reactive([
      {
        title: "火柴盒",
        content: "从一个火柴盒生产资源，从一个火柴盒摧毁资源",
        icon: "fas fa-book"
      },
      {
        title: "午后",
        content: "2点了，开始喝点下午茶吹吹风吧(*^_^*)",
        icon: "fas fa-balance-scale"
      },
      {
        title: "装",
        content: "没事装一装也蛮有意思的",
        icon: "fas fa-sync-alt"
      },
      {
        title: "团队协作",
        content: "一个团队不论大小是真的难以维护",
        icon: "fas fa-users"
      }
    ]);
    
    // 自定义粒子效果
    const createParticles = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const container = particlesContainer.value;

      if (!container || !ctx) return;
      
      container.appendChild(canvas);
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      
      const particles = [];
      const particleCount = 80;
      
      for (let i = 0; i < particleCount; i++) {
        particles.push({
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          radius: Math.random() * 3 + 1,
          color: 'rgba(166,238,225,0.9), ' + (Math.random() * 0.3 + 0.2) + ')',
          speedX: Math.random() * 1 - 0.5,
          speedY: Math.random() * 1 - 0.5
        });
      }
      
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // 绘制粒子
        for (let i = 0; i < particles.length; i++) {
          const p = particles[i];
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
          ctx.fillStyle = p.color;
          ctx.fill();
        }
        
        // 绘制连线
        for (let i = 0; i < particles.length; i++) {
          for (let j = i + 1; j < particles.length; j++) {
            const p1 = particles[i];
            const p2 = particles[j];
            const distance = Math.sqrt(
              Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2)
            );
            
            if (distance < 100) {
              ctx.beginPath();
              ctx.moveTo(p1.x, p1.y);
              ctx.lineTo(p2.x, p2.y);
              ctx.strokeStyle = 'rgba(255, 255, 255, ' + (1 - distance / 100) * 0.2 + ')';
              ctx.lineWidth = 1;
              ctx.stroke();
            }
          }
        }
      }
      
      function update() {
        // 更新粒子位置
        for (let i = 0; i < particles.length; i++) {
          const p = particles[i];
          p.x += p.speedX;
          p.y += p.speedY;
          
          // 边界检测
          if (p.x < 0 || p.x > canvas.width) p.speedX = -p.speedX;
          if (p.y < 0 || p.y > canvas.height) p.speedY = -p.speedY;
        }
      }
      
      function loop() {
        update();
        draw();
        requestAnimationFrame(loop);
      }
      
      // 添加鼠标交互
      let mouseX, mouseY;
      window.addEventListener('mousemove', (e) => {
        mouseX = e.clientX;
        mouseY = e.clientY;
        
        // 将最近的粒子拉向鼠标
        for (let i = 0; i < particles.length; i++) {
          const p = particles[i];
          const distance = Math.sqrt(
            Math.pow(p.x - mouseX, 2) + Math.pow(p.y - mouseY, 2)
          );
          
          if (distance < 120) {
            const angle = Math.atan2(mouseY - p.y, mouseX - p.x);
            p.speedX += Math.cos(angle) * 0.1;
            p.speedY += Math.sin(angle) * 0.1;
            
            // 限制最大速度
            const maxSpeed = 2;
            const currentSpeed = Math.sqrt(p.speedX * p.speedX + p.speedY * p.speedY);
            if (currentSpeed > maxSpeed) {
              p.speedX = (p.speedX / currentSpeed) * maxSpeed;
              p.speedY = (p.speedY / currentSpeed) * maxSpeed;
            }
          }
        }
      });
      
      // 窗口调整大小
      window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      });
      
      loop();
    };
    
    // 初始化页面动效
    onMounted(() => {
      // 初始化打字效果
      new Typed(titleElement.value, {
        strings: ['欢迎来到我的世界', '这里是我的故事...'],
        typeSpeed: 50,
        backSpeed: 30,
        loop: true
      });
      
      // 初始化自定义粒子效果
      createParticles();
    });
    
    // 元素进入视口时的动画处理函数
    const onIntersect = (el) => {
      el.classList.add('animate-in');
    };
    
    // 技能条进入视口时的动画处理函数
    const onSkillIntersect = (el) => {
      el.classList.add('animated');
      const progressBar = el.querySelector('.skill-progress');
      if (progressBar) {
        setTimeout(() => {
          progressBar.style.width = progressBar.getAttribute('data-width');
        }, 100);
      }
    };
    
    // 项目元素进入视口时的动画处理函数
    const onProjectIntersect = (el) => {
      el.classList.add('visible');
    };
    
    // 感悟卡片进入视口时的动画处理函数
    const onInsightIntersect = (el) => {
      el.style.animationPlayState = 'running';
    };
    
    return {
      titleElement,
      particlesContainer,
      skillBars,
      sections,
      skills,
      projects,
      lifeInsights,
      onIntersect,
      onSkillIntersect,
      onProjectIntersect,
      onInsightIntersect
    };
  }
}
</script>

<style>
/* 基础样式 */
.about-me-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  color: #ffffff;
  font-family: 'Poppins', 'Microsoft YaHei', sans-serif;
}

/* 头部区域样式 */
.header-section {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.dynamic-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #0f2027, #203a43, #2c5364);
  background-size: 400% 400%;
  animation: gradient-animation 15s ease infinite;
  z-index: -1;
}

.title-container {
  text-align: center;
  padding: 2rem;
  border-radius: 10px;
}

.main-title {
  font-size: 0.6rem;
  font-weight: 700;
  margin: 0;
  min-height: 0.5rem;
}

/* 信息部分样式 */
.info-section {
  padding: 2rem 0.5rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.info-card {
  background-color: rgba(30, 30, 30, 0.8);
  border-radius: 10px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(50px);
  opacity: 0;
  transition: all 0.8s ease;
}

.info-card.animate-in {
  transform: translateY(0);
  opacity: 1;
}

.section-title {
  font-size: 0.4rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #00aeff, #00f2ff);
  transition: width 0.3s ease;
}

.info-card:hover .section-title::after {
  width: 100%;
}

.section-content {
  line-height: 1.6;
}

/* 技能部分样式 */
.skills-section {
  padding: 0.2rem 0.2rem;
  background-color: rgba(20, 20, 20, 0.9);
  position: relative;
  z-index: 1;
}

.skills-container {
  max-width: 140px;
  margin-left: 1rem;
}

.skill-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.2rem;
  background-color: rgba(40, 40, 40, 0.7);
  border-radius: 5px;
  padding: 0.15rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transform: translateX(-50px);
  opacity: 0;
  animation: slide-in 0.5s forwards;
  animation-play-state: paused;
}

.skill-item.animated {
  animation-play-state: running;
}

.skill-icon {
  margin-right: 1rem;
  font-size: 0.5rem;
  color: #00aeff;
}

.skill-info {
  flex: 1;
}

.skill-info h3 {
  margin: 0 0 0.5rem 0;
  font-size: 0.5rem;
}

.skill-bar {
  height: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  background: linear-gradient(90deg, #00aeff, #00f2ff);
  border-radius: 5px;
  transition: width 1.5s ease-in-out;
}

/* 项目经历部分样式 */
.projects-section {
  /* padding: 5rem 0rem; */
  position: relative;
  z-index: 1;
}

.projects-timeline {
  max-width: 1000px;
  position: relative;
}

.projects-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: linear-gradient(to bottom, #00aeff, #00f2ff);
  transform: translateX(-50%);
}

.project-item {
  position: relative;
  margin-bottom: 4rem;
  opacity: 0;
  transition: all 0.8s ease;
  padding-left: 1.1rem;
}

.project-item.from-left {
  transform: translateX(-100px);
}

.project-item.from-right {
  transform: translateX(100px);
}

.project-item.visible {
  opacity: 1;
  transform: translateX(0);
}

.project-date {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #00aeff, #00f2ff);
  color: #000;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: bold;
  z-index: 2;
}

.project-content {
  width: 45%;
  padding: 2rem;
  background-color: rgba(30, 30, 30, 0.8);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.project-item.from-left .project-content {
  margin-left: auto;
  margin-right: 7%;
}

.project-item.from-right .project-content {
  margin-left: 7%;
}

.project-tech-stack {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.project-tech-stack span {
  background-color: rgba(0, 174, 255, 0.2);
  color: #00f2ff;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.2rem;
}

/* 生活感悟部分样式 */
.life-insights-section {
  padding: 0.3rem 0.8rem;
  background-color: rgba(20, 20, 20, 0.9);
  position: relative;
  z-index: 1;
}

.insights-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.8rem;
  width: 100%;
  margin: 0.1rem auto 0;
}

.insight-card {
  background-color: rgba(40, 40, 40, 0.7);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  transform: scale(0.9);
  opacity: 0;
  animation: fade-in 0.5s forwards;
  animation-play-state: paused;
  /* max-width: 350px; */
  padding: 15px;
}

.insight-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 174, 255, 0.2);
}

.insight-card:hover::before {
  transform: scale(1.5);
  opacity: 0;
}

.insight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0, 174, 255, 0.1), transparent);
  transform: scale(0);
  opacity: 1;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.insight-icon {
  font-size: 0.5rem;
  color: #00aeff;
  margin-bottom: 0.4rem;
}

.insight-card h3 {
  font-size: 0.3rem;
  margin-bottom: 0.3rem;
}
.insight-card p {
  font-size: 0.1rem;
}

/* 粒子效果容器 */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* 动画效果 */
@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes slide-in {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 992px) {
  .projects-timeline::before {
    left: 30px;
  }
  
  .project-date {
    left: 30px;
    transform: translateX(0);
  }
  
  .project-content {
    width: 80%;
    margin-left: 60px !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 768px) {
  .main-title {
    font-size: 2.5rem;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
  
  .insights-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .header-section {
    height: 80vh;
  }
  
  .main-title {
    font-size: 2rem;
  }
}

/* 兼容性处理 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #121212;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #00aeff, #00f2ff);
  border-radius: 4px;
}
</style>